{% extends "base.html.twig" %}
{% block title %}Booking
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="styles/book.css"/>
	{{ parent() }}
{% endblock %}

{% block content %}

	{% if errorList %}
		<div class="position-fixed top-0 end-0 p-3" style="z-index: 1000">
			<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="toast-header">
					<img src="../images/Logo.png" class="rounded me-5" alt="logo">
					<button type="button" class="btn-close  ms-5" data-bs-dismiss="toast" aria-label="Close"></button>
				</div>
				<div class="toast-body">
					<strong class="me-auto">There was a problem...</strong>
					<ul>
						{% for error in errorList %}
							<li>
								{{error}}
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	{% endif %}

	<div class="parallax-1">
		<div class="caption">
			<span class="border">Are You Ready To..</span>
		</div>
	</div>

	<section class="section p-5">

		<div class="container p-5 mt-5 mb-5 bg-light rounded-pill shadow-sm">
			<form id="booking-form" name="booking-form" method="POST" class="">
				<div class="d-flex justify-content-center row g-3 align-items-center text-center  mt-5 mb-5">
					<div class="col-auto">
						<div class="input-group">
							{% for destination in d %}
								<div class="col-auto mx-auto">
									<h3 class="text-center">{{destination.destination_name}}</h3>
									<input type="radio" id="{{destination.destination_name}}" name="location" value="{{destination.destination_name}}"/>
									<label for="{{destination.destination_name}}"><img class="imgButton" src="../{{destination.destination_imagepath}}" height="200" width="200" alt="{{destination.destination_name}} image" title="{{destination.destination_name}} image"/></label>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
				<div class="d-flex justify-content-center row g-3 align-items-center  mb-2">
					<div class="col-auto mb-2">
						<div class="input-group">
							<div class="input-group-text date">Departure Date</div>
							<input type="date" class="form-control" id="autoSizingInputGroup" name="arrival" value="{{v.arrival}}"/>
						</div>
					</div>
					<div class="col-auto  mb-2">
						<div class="input-group">
							<div class="input-group-text date">Return Date</div>
							<input type="date" class="form-control" id="autoSizingInputGroup" name="departure" value="{{v.departure}}"/>

						</div>
					</div>
					<div class="d-flex justify-content-center row g-3 align-items-center  mb-2">
						<div class="col-auto  mb-2">
							<div class="input-group">
								<div class="input-group-text">Adults</div>
								<input type="number" id="form-control" name="adults" value="1" min="1" max="10" />

							</div>
						</div>
						<div class="col-auto  mb-2">
							<div class="input-group">
								<div class="input-group-text">children</div>
								<input type="number" id="form-control" name="children" value="0" min="0" max="10"/>

							</div>
						</div>
					</div>
				</div>
				<div class="d-flex justify-content-center row g-3 align-items-center  mb-2">
					<div class="col-auto  mb-2">
						<button type="submit" class="btn logInButton">Search Hotels</button>
					</div>
				</div>
			</form>
		</div>
	</section>

	<div class="parallax-1">
		<div class="caption">
			<span class="border">...Escape</span>
		</div>
	</div>

	<script>
        window.onload = (event) => {
            let myAlert = document.querySelector('.toast');
            let bsAlert = new bootstrap.Toast(myAlert);
            bsAlert.show();
        }
    </script>
{% endblock %}
